<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>大学在南京</title>
    <style>
        * {
            margin: 0px auto;
            padding: 0px;
        }

        .middle_2 {
            width: 100%;
            height: 600px;
            background-image: url("./13.jpg");
        }

        .middle_2 h1 {
            text-align: center;
            font-size: 30px;
            font-family: Arial;
            font-weight: 100;
            color: black;
        }

        .middle_2_left {
            margin-left: 5px;
            width: 25%;
            height: 550px;
            float: left;
        }

        .middle_2 h5 {
            display: block;
            font-size: 20px;
            font-family: Arial;
            font-weight: 100;
            color: black;
            margin-top: 10px;
        }

        .middle_2 p {
            margin-top: 12px;
            display: block;
            color: black;
            font-weight: 100;
            line-height: 23px;
        }

        @keyframes myfirst {
            0% {
                left: 0px;
                top: 0px;
            }

            25% {
                left: 200px;
                top: 0px;
            }

            50% {
                left: 200px;
                top: 200px;
            }

            75% {
                left: 0px;
                top: 200px;
            }

            100% {
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst

        /* Safari and Chrome */
            {
            0% {
                left: 0px;
                top: 0px;
            }

            25% {
                left: 200px;
                top: 0px;
            }

            50% {
                left: 200px;
                top: 200px;
            }

            75% {
                left: 0px;
                top: 200px;
            }

            100% {
                left: 0px;
                top: 0px;
            }
        }

        .middle_2_middle {
            width: 50%;
            height: 550px;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: myfirst 5s;
            /* Safari and Chrome */
            float: left;
            background-size: 540px 550px;
        }

        .middle_2_middle_1 {
            width: 50%;
            height: 275px;
            float: left;
            background-image: url("./9.jpg");
            background-size: 100% 275px;
        }

        .middle_2_middle_2 {
            width: 50%;
            height: 275px;
            float: left;
            background-image: url("./11.jpg");
            background-size: 100% 275px;
        }

        .middle_2_middle_3 {
            width: 50%;
            height: 275px;
            float: left;
            background-image: url("./10.jpg");
            background-size: 100% 275px;
        }

        .middle_2_middle_4 {
            width: 50%;
            height: 275px;
            float: left;
            background-image: url("./12.jpg");
            background-size: 100% 275px;
        }

        .middle_2_right {
            width: 24%;
            height: 550px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="middle_2">
        <h1>美校美景</h1>
        <!--中间第二部分左边 开始-->
        <div class="middle_2_left">
            <h5><b>南京航空航天大学:</b></h5>
            <p>&nbsp;&nbsp;南航的校园非常美，是婉约与豪迈的结合。南航人对母校的情谊尽藏在荟萃楼，这栋古楼收录着南航半个世纪的记忆，优雅宁静，缄默不语，古典雅致的建筑风格，青树翠曼，蒙络摇缀，终年守候着代代南航人，见证着南航的一次次新奇迹。
            </p>
            <br><br><br><br><br><br>
            <h5><b>南京师范大学:</b></h5>

            <p>
                &nbsp;&nbsp;古典园林如梦似幻。南师的美，早就出了名！对于南师人而言，热播电影、电视剧里，到处都是熟悉的身影。而随园、仙林、紫金南师的美景不要太多！随园是古典浪漫的，仙林充满了现代青春的气息，紫金又多了些精致。黛瓦覆顶，勾檐翘角，充满了浓厚的民国韵味。绿草如茵的起霞坡、光影斑驳的林荫道、神秘的后山……在南师大谈恋爱，那样的校园爱情应该很美吧。
            </p>
        </div>
        <div class="middle_2_middle">
            <a href="#">
                <div class="middle_2_middle_1"></div>
            </a>
            <a href="#">
                <div class="middle_2_middle_2"></div>
            </a>
            <a href="#">
                <div class="middle_2_middle_3"></div>
            </a>
            <a href="#">
                <div class="middle_2_middle_4"></div>
            </a>
        </div>
        <div class="middle_2_right">
            <h5><b>南京理工大学:</b></h5>
            <p>&nbsp;&nbsp;走在紫霞湖畔，看遍南理工的四季。北依紫金山，西临明城墙，与中山陵风景区浑然一体。天气好的时候，在南理远远地可以看到中山陵。</p>

            <br><br><br><br><br><br><br>
            <h5><b>南京林业大学:</b></h5>
            <p>
                &nbsp;&nbsp;有着关于南京最具象的缩影。每年樱花绽放的季节，南林都会变成南京最热门的景点，这时候我们总是戏称南林是人民公园。落英纷纷、甚是梦幻，让人仿佛置身于童话般的世界。
            </p>
        </div>
    </div>


    <div id="left">
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
    </div>
    <div id="main">
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
    </div>
    <div id="right">
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
    </div>
</body>

</html>